<div style="margin-left: 30%">
  <h2>My Heroes</h2>

  <div>
    <label>Hero name:
      <input #heroName/>
    </label>
    <!-- (click) passes input value to add() and then clears the input -->
    <button (click)="add(heroName.value); heroName.value=''">add</button>
  </div>

  <ul class="heroes">
    <li *ngFor="let hero of heroes">
      <a routerLink="/detail/{{hero.id}}">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </a>
      <button class="delete" title="delete hero" (click)="delete(hero)">x</button>
    </li>
  </ul>
  <!--向app-hero-detail组件中添加selectedHero 用@Input() hero: Hero;引入-->
  <!-- <app-hero-detail [hero]="selectedHero"></app-hero-detail>-->
  <!--<label *ngFor="let kill of name">
       {{kill}}
  </label>-->
</div>
